<template>
  <div id="main">
  <a id="first" href="https://www.4399.com/" ><img src="../../public/1/Minecraft.png" alt="Minecraft" title="Minecraft"></a>
  <a id="second" href="https://www.4399.com/"><img src="../../public/1/赛尔号.jpg" alt="赛尔号" title="赛尔号" height="390px"></a>
  <a id="third" href="https://www.4399.com/"><img src="../../public/1/csgo.jpg" alt="CSGO" title="CSGO" height="330px"></a>
  <a id="forth" href="https://www.4399.com/"><img src="../../public/1/植物VS僵尸.jpg" alt="植物大战僵尸" title="植物大战僵尸"></a>
  </div>
</template>

<script>
export default {
  name: "Game1"
}
</script>

<style scoped>
#main {
  width: 80%;
  height: 500px;
  margin: auto;
}
div {
  position: center;
}
a {
  display: inline-block;
  margin: auto;

}
#first{
  position: absolute;
left:230px;
}
#second {
  position: absolute;
  right:230px;
}
#third {
  position: absolute;
  bottom:-1130px;
  left:230px;
}
#forth {
  position: absolute;
  bottom:-1130px;
  right:230px;
}
img {
  width: 400px;
}

</style>